<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 9.4.5 (461378)"/><meta name="altitude" content="6.608891010284424"/><meta name="author" content="704206198@qq.com"/><meta name="created" content="2020-10-25 15:31:52 +0000"/><meta name="latitude" content="31.37550354003906"/><meta name="longitude" content="121.4935588839833"/><meta name="source" content="desktop.mac"/><meta name="updated" content="2020-10-29 16:57:58 +0000"/><meta name="content-class" content="yinxiang.markdown"/><title>day10：vue项目 - 搜索 + 排序</title></head><body><div style="font-size: 14px; margin: 0; padding: 0; width: 100%;"><h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000; margin-top: 14px;">一、完善各页面的头部区域</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">添加首页头部<a href="https://youzan.github.io/vant/#/zh-CN/nav-bar" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">自定义导航组件</a>，设置虚拟搜索框，实为点击跳转到搜索页面</p>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">注意样式调试</p>
</li>
</ol>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">二、准备搜索页面</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">设置搜索页面的头部导航组件，添加<a href="https://youzan.github.io/vant/#/zh-CN/search" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">搜索组件</a></p>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">使用 <a href="https://youzan.github.io/vant/#/zh-CN/tag" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">标签组件</a> 设置搜索关键字</p>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box;">热门关键字</li>
<li style="line-height: 160%; box-sizing: content-box;">搜索历史</li>
</ol>
</li>
</ol>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">三、后端数据接口</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">后端准备搜索接口，使用模糊搜索，搜索字段为商品名称和商品描述</p>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">准备搜索历史集合</p>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">设置添加搜索历史接口，记录用户搜索历史</p>
</li>
</ol>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">四、搜索结果页面</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">根据搜索关键字，调用搜索接口，拿到搜索数据，渲染页面</p>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">使用 <a href="https://youzan.github.io/vant/#/zh-CN/card" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">商品卡片</a> 渲染搜索结果</p>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">使用 <a href="https://youzan.github.io/vant/#/zh-CN/sticky" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">粘性布局</a> 配合 <a href="https://youzan.github.io/vant/#/zh-CN/dropdown-menu" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">下拉菜单组件</a> 创建 排序 及 筛选 选项</p>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">当数据过多时，显示回到顶部按钮</p>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">注意搜索页面的重新搜索功能</p>
</li>
</ol>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">五、排序和筛选</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">排序可选 前端排序 或 后端排序</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">前端排序
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">请求到搜索数据后，按照指定字段进行排序</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">记录未排序数据，用于渲染 默认排序 商品</li>
</ol>
</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">后端排序
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">请求数据时进行排序</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">请求数据后进行排序</li>
</ol>
</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">价格区间筛选</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">前端筛选</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">后端筛选</li>
</ul>
</li>
</ol>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">六、详情页头部设置 - 楼层</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">参考 京东商城移动端 的详情页头部效果</p>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">添加滚动事件，根据滚动记录，切换头部导航显示</p>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">并根据滚动距离，切换导航的当前项显示</p>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">设置回到顶部</p>
</li>
</ol>
</div><center style="display:none !important;visibility:collapse !important;height:0 !important;white-space:nowrap;width:100%;overflow:hidden">%23%20%E4%B8%80%E3%80%81%E5%AE%8C%E5%96%84%E5%90%84%E9%A1%B5%E9%9D%A2%E7%9A%84%E5%A4%B4%E9%83%A8%E5%8C%BA%E5%9F%9F%0A1.%20%E6%B7%BB%E5%8A%A0%E9%A6%96%E9%A1%B5%E5%A4%B4%E9%83%A8%5B%E8%87%AA%E5%AE%9A%E4%B9%89%E5%AF%BC%E8%88%AA%E7%BB%84%E4%BB%B6%5D(https%3A%2F%2Fyouzan.github.io%2Fvant%2F%23%2Fzh-CN%2Fnav-bar)%EF%BC%8C%E8%AE%BE%E7%BD%AE%E8%99%9A%E6%8B%9F%E6%90%9C%E7%B4%A2%E6%A1%86%EF%BC%8C%E5%AE%9E%E4%B8%BA%E7%82%B9%E5%87%BB%E8%B7%B3%E8%BD%AC%E5%88%B0%E6%90%9C%E7%B4%A2%E9%A1%B5%E9%9D%A2%0A%0A2.%20%E6%B3%A8%E6%84%8F%E6%A0%B7%E5%BC%8F%E8%B0%83%E8%AF%95%0A%0A%0A%23%20%E4%BA%8C%E3%80%81%E5%87%86%E5%A4%87%E6%90%9C%E7%B4%A2%E9%A1%B5%E9%9D%A2%0A1.%20%E8%AE%BE%E7%BD%AE%E6%90%9C%E7%B4%A2%E9%A1%B5%E9%9D%A2%E7%9A%84%E5%A4%B4%E9%83%A8%E5%AF%BC%E8%88%AA%E7%BB%84%E4%BB%B6%EF%BC%8C%E6%B7%BB%E5%8A%A0%5B%E6%90%9C%E7%B4%A2%E7%BB%84%E4%BB%B6%5D(https%3A%2F%2Fyouzan.github.io%2Fvant%2F%23%2Fzh-CN%2Fsearch)%0A%0A2.%20%E4%BD%BF%E7%94%A8%20%5B%E6%A0%87%E7%AD%BE%E7%BB%84%E4%BB%B6%5D(https%3A%2F%2Fyouzan.github.io%2Fvant%2F%23%2Fzh-CN%2Ftag)%20%E8%AE%BE%E7%BD%AE%E6%90%9C%E7%B4%A2%E5%85%B3%E9%94%AE%E5%AD%97%0A%20%20%20%201.%20%E7%83%AD%E9%97%A8%E5%85%B3%E9%94%AE%E5%AD%97%0A%20%20%20%202.%20%E6%90%9C%E7%B4%A2%E5%8E%86%E5%8F%B2%0A%0A%0A%23%20%E4%B8%89%E3%80%81%E5%90%8E%E7%AB%AF%E6%95%B0%E6%8D%AE%E6%8E%A5%E5%8F%A3%0A1.%20%E5%90%8E%E7%AB%AF%E5%87%86%E5%A4%87%E6%90%9C%E7%B4%A2%E6%8E%A5%E5%8F%A3%EF%BC%8C%E4%BD%BF%E7%94%A8%E6%A8%A1%E7%B3%8A%E6%90%9C%E7%B4%A2%EF%BC%8C%E6%90%9C%E7%B4%A2%E5%AD%97%E6%AE%B5%E4%B8%BA%E5%95%86%E5%93%81%E5%90%8D%E7%A7%B0%E5%92%8C%E5%95%86%E5%93%81%E6%8F%8F%E8%BF%B0%0A%0A2.%20%E5%87%86%E5%A4%87%E6%90%9C%E7%B4%A2%E5%8E%86%E5%8F%B2%E9%9B%86%E5%90%88%0A%0A3.%20%E8%AE%BE%E7%BD%AE%E6%B7%BB%E5%8A%A0%E6%90%9C%E7%B4%A2%E5%8E%86%E5%8F%B2%E6%8E%A5%E5%8F%A3%EF%BC%8C%E8%AE%B0%E5%BD%95%E7%94%A8%E6%88%B7%E6%90%9C%E7%B4%A2%E5%8E%86%E5%8F%B2%0A%0A%0A%23%20%E5%9B%9B%E3%80%81%E6%90%9C%E7%B4%A2%E7%BB%93%E6%9E%9C%E9%A1%B5%E9%9D%A2%0A1.%20%E6%A0%B9%E6%8D%AE%E6%90%9C%E7%B4%A2%E5%85%B3%E9%94%AE%E5%AD%97%EF%BC%8C%E8%B0%83%E7%94%A8%E6%90%9C%E7%B4%A2%E6%8E%A5%E5%8F%A3%EF%BC%8C%E6%8B%BF%E5%88%B0%E6%90%9C%E7%B4%A2%E6%95%B0%E6%8D%AE%EF%BC%8C%E6%B8%B2%E6%9F%93%E9%A1%B5%E9%9D%A2%0A%0A2.%20%E4%BD%BF%E7%94%A8%20%5B%E5%95%86%E5%93%81%E5%8D%A1%E7%89%87%5D(https%3A%2F%2Fyouzan.github.io%2Fvant%2F%23%2Fzh-CN%2Fcard)%20%E6%B8%B2%E6%9F%93%E6%90%9C%E7%B4%A2%E7%BB%93%E6%9E%9C%0A%0A3.%20%E4%BD%BF%E7%94%A8%20%5B%E7%B2%98%E6%80%A7%E5%B8%83%E5%B1%80%5D(https%3A%2F%2Fyouzan.github.io%2Fvant%2F%23%2Fzh-CN%2Fsticky)%20%E9%85%8D%E5%90%88%20%5B%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95%E7%BB%84%E4%BB%B6%5D(https%3A%2F%2Fyouzan.github.io%2Fvant%2F%23%2Fzh-CN%2Fdropdown-menu)%20%E5%88%9B%E5%BB%BA%20%E6%8E%92%E5%BA%8F%20%E5%8F%8A%20%E7%AD%9B%E9%80%89%20%E9%80%89%E9%A1%B9%0A%0A4.%20%E5%BD%93%E6%95%B0%E6%8D%AE%E8%BF%87%E5%A4%9A%E6%97%B6%EF%BC%8C%E6%98%BE%E7%A4%BA%E5%9B%9E%E5%88%B0%E9%A1%B6%E9%83%A8%E6%8C%89%E9%92%AE%0A%0A5.%20%E6%B3%A8%E6%84%8F%E6%90%9C%E7%B4%A2%E9%A1%B5%E9%9D%A2%E7%9A%84%E9%87%8D%E6%96%B0%E6%90%9C%E7%B4%A2%E5%8A%9F%E8%83%BD%0A%0A%0A%23%20%E4%BA%94%E3%80%81%E6%8E%92%E5%BA%8F%E5%92%8C%E7%AD%9B%E9%80%89%0A1.%20%E6%8E%92%E5%BA%8F%E5%8F%AF%E9%80%89%20%E5%89%8D%E7%AB%AF%E6%8E%92%E5%BA%8F%20%E6%88%96%20%E5%90%8E%E7%AB%AF%E6%8E%92%E5%BA%8F%0A%20%20%20%20-%20%E5%89%8D%E7%AB%AF%E6%8E%92%E5%BA%8F%0A%20%20%20%20%20%20%20%201.%20%E8%AF%B7%E6%B1%82%E5%88%B0%E6%90%9C%E7%B4%A2%E6%95%B0%E6%8D%AE%E5%90%8E%EF%BC%8C%E6%8C%89%E7%85%A7%E6%8C%87%E5%AE%9A%E5%AD%97%E6%AE%B5%E8%BF%9B%E8%A1%8C%E6%8E%92%E5%BA%8F%0A%20%20%20%20%20%20%20%202.%20%E8%AE%B0%E5%BD%95%E6%9C%AA%E6%8E%92%E5%BA%8F%E6%95%B0%E6%8D%AE%EF%BC%8C%E7%94%A8%E4%BA%8E%E6%B8%B2%E6%9F%93%20%E9%BB%98%E8%AE%A4%E6%8E%92%E5%BA%8F%20%E5%95%86%E5%93%81%0A%20%20%20%20-%20%E5%90%8E%E7%AB%AF%E6%8E%92%E5%BA%8F%0A%20%20%20%20%20%20%20%201.%20%E8%AF%B7%E6%B1%82%E6%95%B0%E6%8D%AE%E6%97%B6%E8%BF%9B%E8%A1%8C%E6%8E%92%E5%BA%8F%0A%20%20%20%20%20%20%20%202.%20%E8%AF%B7%E6%B1%82%E6%95%B0%E6%8D%AE%E5%90%8E%E8%BF%9B%E8%A1%8C%E6%8E%92%E5%BA%8F%0A%0A2.%20%E4%BB%B7%E6%A0%BC%E5%8C%BA%E9%97%B4%E7%AD%9B%E9%80%89%0A%20%20%20%20-%20%E5%89%8D%E7%AB%AF%E7%AD%9B%E9%80%89%0A%20%20%20%20-%20%E5%90%8E%E7%AB%AF%E7%AD%9B%E9%80%89%0A%0A%0A%23%20%E5%85%AD%E3%80%81%E8%AF%A6%E6%83%85%E9%A1%B5%E5%A4%B4%E9%83%A8%E8%AE%BE%E7%BD%AE%20-%20%E6%A5%BC%E5%B1%82%0A1.%20%E5%8F%82%E8%80%83%20%E4%BA%AC%E4%B8%9C%E5%95%86%E5%9F%8E%E7%A7%BB%E5%8A%A8%E7%AB%AF%20%E7%9A%84%E8%AF%A6%E6%83%85%E9%A1%B5%E5%A4%B4%E9%83%A8%E6%95%88%E6%9E%9C%0A%0A2.%20%E6%B7%BB%E5%8A%A0%E6%BB%9A%E5%8A%A8%E4%BA%8B%E4%BB%B6%EF%BC%8C%E6%A0%B9%E6%8D%AE%E6%BB%9A%E5%8A%A8%E8%AE%B0%E5%BD%95%EF%BC%8C%E5%88%87%E6%8D%A2%E5%A4%B4%E9%83%A8%E5%AF%BC%E8%88%AA%E6%98%BE%E7%A4%BA%0A%0A3.%20%E5%B9%B6%E6%A0%B9%E6%8D%AE%E6%BB%9A%E5%8A%A8%E8%B7%9D%E7%A6%BB%EF%BC%8C%E5%88%87%E6%8D%A2%E5%AF%BC%E8%88%AA%E7%9A%84%E5%BD%93%E5%89%8D%E9%A1%B9%E6%98%BE%E7%A4%BA%0A%0A4.%20%E8%AE%BE%E7%BD%AE%E5%9B%9E%E5%88%B0%E9%A1%B6%E9%83%A8%0A%0A%0A%0A</center></body></html>